<template>
  <view>
    <custom-navbar title="商品详情"></custom-navbar>
    <up-swiper
      :list="goodsDetail.goodsImgs"
      keyName="imgUrl"
      indicator
      indicatorMode="line"
      circular
      radius="0"
      width="100%"
      height="750rpx"
    ></up-swiper>
    <view class="padding-lr-default goods-info bg-white mb20">
      <view class="fs32 mb10 pt20">{{
        goodsDetail.goodsName || goodsDetail.title || goodsDetail.shortTitle
      }}</view>
      <view class="color-theme mb10">
        ￥<text class="fs40">{{ goodsDetail.minPrice }}</text>
      </view>

      <view class="df-ac line-item">
        <view class="mr10 title">购买类型</view>
        <view>111</view>
      </view>

      <view class="df-ac line-item">
        <view class="mr10 title">优惠券</view>
        <view>111</view>
      </view>
      <view class="df-ac line-item">
        <view class="mr10 title">促销活动</view>
        <view>
          <view>代金券</view>
          <view>满500减50</view>
          <view>代金券</view>
          <view>满500减50</view>
        </view>
      </view>

      <view class="df-ac line-item">
        <view class="mr10 title">品牌名称</view>
        <view>{{ goodsDetail.brandName }}</view>
      </view>

      <view class="df-ac line-item">
        <view class="mr10 title">服务</view>
        <view>
          <up-tag
            class="mr10 mb10"
            v-for="(item, index) in goodsDetail.tags"
            :key="index"
            :text="item.name"
            type="warning"
          ></up-tag
        ></view>
      </view>
    </view>
    <view class="mt20">
      <up-divider text="宝贝详情"></up-divider>
      <up-image
        v-for="(item, index) in goodsDetail.goodsImgs"
        :key="index"
        :show-loading="true"
        :src="item.imgUrl"
        width="100%"
        height="750rpx"
      ></up-image>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { goodsDetailApi } from "@/api/index.js";
const goodsDetail = ref({});
const getGoodsDetail = async (goodsId) => {
  const res = await goodsDetailApi(goodsId);
  goodsDetail.value = res;
};
onLoad((options) => {
  const { goodsId } = options;
  getGoodsDetail(goodsId);
});
</script>

<style lang="scss" scoped>
page {
  background: $page-gray-color;
}
.goods-info {
  .line-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 20rpx 0;
    .title {
      width: 150rpx;
      color: #606266;
      flex-shrink: 0;
    }
  }
}
</style>
